<template>
  <el-upload
    class="upload"
    :limit="3"
    :headers = "headers"
    :file-list.sync = "files"
    :before-upload = "beforeUpload"
    :on-exceed = "exceed"
    :on-remove = "remove"
    :on-error = "error"
    :on-success = "success"
    :action="getUploadUrl()"
    multiple>
      <el-button size="small" type="primary">附件上传</el-button>
      <span slot="tip" class="el-upload__tip"> 只能上传jpg/png/图片文件，且不超过2MB</span>
  </el-upload>
</template>

<script>
  export default {
    data () {
      return {
        headers: {
          token: this.$cookie.get('token')  //从cookie里获取token，并赋值  Authorization ，而不是token
        },
      }
    },
    props:{
      files:{ 
        default:function(){
          return []
        },
        type:Array
      }
    },
    methods: {
      getUploadUrl () {
        return this.$http.adornUrl('/fileUpload')
      },
      beforeUpload(file){
        if (file.size > 1024 *1024 * 2) {
            this.$message.error("文件不能超过2M, 请重新上传!");
            return false;
        }
      },
      exceed(){
        this.$message.error('最多只能上传3个附件')
      },
      remove(file, fileList){
        
      },
      error(err, file, fileList){
        this.$message.error(err)
      },
      success(response, file, fileList){
        //console.log(this.files) 
        if(response.code === 0){
          this.files.length = 0;
          this.files.push(...fileList);
           //name, response.url 
          //this.fileWrap.attachments = fileList
          console.log(this.files) 
        }
        else{
          this.$message.error(response.msg)
        }
      }
    }
  }
</script>
<style>
  .el-upload__tip{
    padding-left: 10px;
  }
</style>
